<template>
	<div class="padding" >
		<div v-load-more="loaderMore"> 
			<div class="spec-list" v-for="(item,index) in res_data" :key="index">
				<div class="sl-card-div" v-if="item[0]">
					<router-link tag="div" :to="`/aspec/${item[0].subject_id}`" class="sl-card">
						<div class="img">
							<img :src="imgBaseUrl + item[0].pic">
						</div>
						<div class="title ellipsis">
							{{item[0].subject_name}}
						</div>
					</router-link>
				</div>
				<div class="sl-card-div sl-card-2" v-if="item[1]">
					<router-link tag="div" :to="`/aspec/${item[1].subject_id}`" class="sl-card">
						<div class="img">
							<img :src="imgBaseUrl + item[1].pic">
						</div>
						<div class="title ellipsis">
							{{item[1].subject_name}}
						</div>
					</router-link>
					<router-link tag="div" :to="`/aspec/${item[2].subject_id}`" class="sl-card" v-if="item[2]">
						<div class="img">
							<img :src="imgBaseUrl + item[2].pic">
						</div>
						<div class="title ellipsis">
							{{item[2].subject_name}}
						</div>
					</router-link>
				</div>
			</div>
		</div>
		<p v-if="showLoading" class="page-infinite-loading">
			<mt-spinner type="snake"></mt-spinner>加载中...
		</p>
		<p v-if="touchend" class="no-more">
			没有更多了
		</p>
	</div>
</template>

<script>
	import { subjectGetlist, imgBaseUrl } from '@/api';
    import {loadMore} from '@/components/common/mixin'
	export default {
		name: 'spec',
		data () {
			return {
				res_data: [],
				imgBaseUrl,
				user: null,
				aid: null,
				page: 1,
				preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
				showLoading: false,
				touchend: false, //没有更多数据
			}
		},
		mounted() {
			this.getResData();
		},
        mixins: [loadMore],
		methods:{
			async getResData(){
				//获取数据
				this.showLoading = true;
				let para = {
					user_id: this.userInfo?this.userInfo.user_id:'',
					page: this.page,
				};
				let res = await subjectGetlist(para);
				let res_data = res.data
				var result = [];
				for(var i=0,len=res_data.length;i<len;i+=3){
					result.push(res_data.slice(i,i+3));
				}
				this.hideLoading();
				this.res_data = [...result];
				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data.length < 10) {
					this.touchend = true;
					return
				}
				this.preventRepeatReuqest = false;
				//开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
				// showBack(status => {
				// 	this.showBackStatus = status;
				// });
			},
			//到达底部加载更多数据
			async loaderMore(){
				if (this.touchend) {
					return
				}
				//防止重复请求
				if (this.preventRepeatReuqest) {
					return 
				}
				this.showLoading = true;
				this.preventRepeatReuqest = true;

				//数据的定位加10位
				this.page++;
				let para = {
					user_id: this.userInfo?this.userInfo.user_id:'',
					page: this.page,
				};
				let res = await subjectGetlist(para);
				let res_data = res.data
				var result = [];
				for(var i=0,len=res_data.length;i<len;i+=3){
					result.push(res_data.slice(i,i+3));
				}
				this.hideLoading();
				this.res_data = [...this.res_data, ...result];
				
				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data.length < 10) {
					this.touchend = true;
					return
				}
				this.preventRepeatReuqest = false;
			},
			//开发环境与编译环境loading隐藏方式不同
			hideLoading(){
				this.showLoading = false;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import 'src/style/mixin';
	.sl-card-div {
		margin: 0.4rem 0;
	}
	.spec-list{
		.sl-card {
			width: 100%;
			background: #fff;
			.title {
				text-align: center;
				font-size: 0.6rem;
				line-height: 1.5rem;
			}
		}
		.sl-card-2 {
			display: flex;
			justify-content: space-between;
			.sl-card {
				width: 49%;
			}
		}
	}
</style>
